<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<button class="btn">点击切换div宽度</button>
	<p class="p">我是不是</p>
	<div style="width:200px" id="div">
	<p>卧室里不不</p>
	<button>点击切换</button>
	</div>
	<div class="div"></div>
	<button class="annu">我是按钮</button>
</body>
<script>
var btn = document.getElementsByClassName("btn")[0];
console.log(btn.attributes)
var p = document.getElementsByClassName("p")[0];
btn.onclick = function(){
	p.innerText = "我心情很好";
}

var div = document.getElementById("div");
var z = div.cloneNode();
console.log(z);
var p1 = div.children[0];
var btn1= div.children[1];
console.log(btn1)
btn1.onclick = function(){
	div.style.width = "500px";
	div.style.height = "300px";
	p1.classList.toggle(p1.innerText="孙悟空和猪八戒")
}

var div1 = document.getElementsByClassName("div")[0];
var an = document.createElement("button");
 an.innerText = "我是一个按钮";
 console.log(an)

 var ann = document.getElementsByClassName("annu")[0];
 ann.onclick = function(){
 ann.innerText = "你好";
}
</script>
</html>